<template>
  <div class="main">
    <div class="header-card">
      <div class="uc-header">
        <div class="back" @click="$router.back()">
          <img src="@/assets/img/3.png" />
        </div>
        <div class="title">{{ $t("HelpCenter") }}</div>
      </div>
    </div>
    <div class="cont">
      <div class="imgbox"></div>
      <p class="cps">
        {{ $t("helpCenterTips") }}
      </p>
      <p class="phone">{{ number }}</p>
      <a
        class="copybtn"
        href="https://api.whatsapp.com/send?phone=12136824161"
        target="_blank"
        >{{ $t("Contact") }}</a
      >
      <!-- <p class="copied">Copied</p> -->
    </div>
  </div>
</template>

<script>
import { httpWhatsapp } from "@/http/api";
import { copyText } from "@/utils/common";
export default {
  name: "helpCenter",
  data() {
    return {
      number: "",
    };
  },
  created() {
    this.getWhatsApp();
  },
  methods: {
    async getWhatsApp() {
      const res = await httpWhatsapp();
      this.number = res.data.number;
    },
    copy(txt) {
      copyText(txt);
      this.$toast({ className: "z-9999", message: "Copied" });
    },
  },
};
</script>

<style lang="less" scoped>
body {
  background-color: #c96b5f;
}
.main {
  .header-card {
    width: 750px;
    height: 215px;
    // background: url("~@/assets/img/ucheader2.png") center/750px 215px;
    background-color: #000000;

    .uc-header {
      padding-top: 60px;
    }
  }

  .cont {
    width: 100%;
    padding: 64px;
    // background: #fff;
    background-color: #e5c184;
    border-radius: 40px;
    position: relative;
    top: -64px;

    .imgbox {
      width: 500px;
      height: 400px;
      margin: 100px auto;
      background: url("~@/assets/img/help.png");
      background-size: 100%;
    }

    .cps {
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 1.5;
      // color: rgba(171, 182, 212, 1);
      color: black;
      text-align: center;
      margin-bottom: 60px;
    }

    .phone {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 2.4px;
      color: #000000;
      text-align: center;
      margin-bottom: 32px;
    }

    .copybtn {
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(255, 255, 255, 1);
      user-select: none;

      height: 69px;
      /**background: linear-gradient(178.44deg,
          rgba(238, 220, 201, 1) 0%,
          rgba(220, 188, 155, 1) 100%);
      box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);**/
      background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      margin: 0 auto 120px;
      //border-radius: 20px;
    }

    .copied {
      text-align: center;
      font-size: 24px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(171, 182, 212, 1);
    }
  }
}
</style>
